import React from 'react'
import { TabBar } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import { tabberRouter } from '../../router'
import style from './index.module.css'
function Tabber() {
    const location = useLocation()
    const navigate = useNavigate()
  const { pathname } = location
  const setRouteActive=(value)=>{
    navigate(value)
  }
  return (
    <div className={style['tabber-container']}>
      <div className={style['tabber-content']}>
      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
      {tabberRouter.map(item => (
        <TabBar.Item key={item.path} icon={item.meta.icon} title={item.meta.title} />
      ))}
    </TabBar>
      </div>
    </div>
  )
}

export default Tabber
